<template>
  <div class="page">
    <header class="page-header">
      <div class="title">
        <h1>文档管理</h1>
        <p class="subtitle">上传、浏览并在线编辑文档</p>
      </div>
      <div class="actions">
        <label class="btn btn-secondary">
          <input type="file" @change="onFileChange" hidden />
          选择文件
        </label>
        <button class="btn btn-secondary" @click="uploadFile" :disabled="!selectedFile">上传文档</button>
      </div>
    </header>

    <section class="content-card">
      <div class="card-header">
        <h2>我的文档</h2>
        <div class="tools">
          <button class="btn btn-secondary" @click="handleSearch">刷新列表</button>
        </div>
      </div>

      <div v-if="documents.length === 0" class="empty">
        <div class="empty-illustration">📄</div>
        <div class="empty-text">暂无文档，先上传一个吧</div>
      </div>

      <ul v-else class="doc-grid">
        <li v-for="doc in documents" :key="doc.id" class="doc-card">
          <div class="doc-icon">📄</div>
          <div class="doc-meta">
            <div class="doc-title" :title="doc.originalFileName || doc.title">{{ doc.originalFileName || doc.title }}</div>
            <div class="doc-sub">ID: {{ doc.id || doc.fileId }}</div>
          </div>
          <div class="doc-actions">
            <button class="btn btn-edit" @click="editDocument(doc.id || doc.fileId)">在线编辑</button>
          </div>
        </li>
      </ul>

      <div class="pagination" v-if="totalPages > 1">
        <button class="btn btn-ghost" :disabled="page.current === 1" @click="changePage(page.current - 1)">上一页</button>
        <span class="page-info">第 {{ page.current }} / {{ totalPages }} 页</span>
        <button class="btn btn-ghost" :disabled="page.current >= totalPages" @click="changePage(page.current + 1)">下一页</button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { uploadDocument, getFileList } from '../services/api'

const selectedFile = ref(null)

const documents = ref([])
const router = useRouter()

const page = ref({ current: 1, size: 10, total: 0 })
const totalPages = computed(() => Math.max(1, Math.ceil(page.value.total / page.value.size)))

const onFileChange = (e) => {
  selectedFile.value = e.target.files[0]
}

const uploadFile = async () => {
  if (!selectedFile.value) return
  try {
    await uploadDocument({
      file: selectedFile.value
    })
    alert('上传成功！')
    handleSearch()
  } catch (error) {
    console.error('上传失败:', error)
    alert('上传失败！')
  }
}

const handleSearch = async () => {
  try {
    const params = {
      current: page.value.current,
      size: page.value.size
    }
    const { data } = await getFileList(params)
    const pageData = data?.data || data
    documents.value = pageData?.records || []
    page.value.total = pageData?.total || 0
  } catch (e) {
    console.error('查询文件列表失败', e)
    alert('查询文件列表失败')
  }
}

const changePage = (next) => {
  page.value.current = next
  handleSearch()
}

const editDocument = (documentId) => {
  router.push({ name: 'Editor', params: { documentId } })
}

onMounted(() => {
  handleSearch()
})
</script>

<style scoped>
:root { --bg:#f7f9fc; --card:#ffffff; --muted:#6b7280; --text:#0f172a; --primary:#2563eb; --primary-600:#1d4ed8; --border:#e5e7eb; }

.page { min-height: 100vh; background: radial-gradient(1200px 600px at 20% -10%, #eef2ff 0%, rgba(238,242,255,0) 60%), radial-gradient(1200px 600px at 120% 10%, #e6f7ff 0%, rgba(230,247,255,0) 55%), var(--bg); padding: 24px; color: var(--text); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1080px; margin: 0 auto 16px; }
.title h1 { margin: 0; font-size: 24px; font-weight: 700; }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: 10px; }

.content-card { max-width: 1080px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: 0 8px 30px rgba(15,23,42,.06); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-header h2 { margin: 0; font-size: 18px; }

.empty { display: grid; place-items: center; gap: 8px; padding: 48px 0; color: var(--muted); }
.empty-illustration { font-size: 40px; }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 8px 0; list-style: none; }
.doc-card { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.doc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.doc-icon { font-size: 22px; }
.doc-meta { min-width: 0; }
.doc-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.doc-actions { display: flex; gap: 8px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.page-info { color: var(--muted); font-size: 13px; }

.btn { appearance: none; border: 1px solid var(--border); background: #fff; color: var(--text); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease; font-size: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.btn:hover { background: #f8fafc; border-color: #d1d5db; box-shadow: 0 2px 6px rgba(15,23,42,.06); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary-600); color: white; }
.btn-primary:hover { background: var(--primary-600); }
.btn-secondary { background: #eff6ff; border-color: #c7d2fe; color: #1d4ed8; }
.btn-ghost { background: transparent; }
.btn-edit { background: #10b981; border-color: #059669; color: white; font-weight: 600; }
.btn-edit:hover { background: #059669; }
.btn-sm { padding: 6px 10px; font-size: 13px; }
</style>
